﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dreamer CMS - 后台管理系统</title> 
    <link href="/resource/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="/resource/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="row">
    <div class="col-md-12">
    	<h1 class="panel-heading">生成网站</h1>
        <!--breadcrumbs start -->
        <ul class="breadcrumb">
			<li><a href="/admin/dashboard/toIndex"><i class="fa fa-home"></i> 首页</a></li>
			<li class="active">生成网站</li>
		</ul>
        <!--breadcrumbs end -->
    </div>
</div>
<section class="panel">
	<header class="panel-heading tab-bg-dark-navy-blue">
        <ul class="nav nav-tabs" shiro:hasAnyPermissions="system:static:generate">
            <li class="active">
                <a data-toggle="tab" href="#home"><i class="fa fa-print"></i> <b>生成首页</b></a>
            </li>
            <li class="">
                <a data-toggle="tab" href="#category"><i class="fa fa-print"></i> <b>生成栏目页</b></a>
            </li>
        </ul>
    </header>
	<div class="panel-body">
		<div class="tab-content">
		    <div id="home" class="tab-pane active">
		        <form class="col s12" id="form1" th:object="${currentTheme}" th:action="@{/admin/static/generateIndex}" onsubmit="return validateForm();" method="post">
					<div class="form-group-center form-control-medium">
						<label for="homeTemplateFile">首页模版文件：</label>
						<input type="text" id="homeTemplateFile" class="form-control" th:value="'/templates/' + *{themePath} + '/index.html'" readonly="readonly">
					</div>
					<div class="form-btn-group-center" shiro:hasAnyPermissions="system:static:generate">
						<button type="button" class="btn btn-info" onclick="generate('1');">一键生成首页</button>
					</div>
				</form>
			</div>
			<div id="category" class="tab-pane">
				<form class="col s12" id="form2" th:action="@{/admin/static/generateCategory}" onsubmit="return validateForm();" method="post">
					<div class="form-group-center form-control-medium">
						<label for="homeTemplateFile">指定栏目生成：</label>
						<select class="form-control m-b-10" name="id">
							<option value="">生成全部栏目...</option>
                            <option th:each="item : ${categorys}" th:text="${item.cnname}" th:value="${item.id}"></option>
                        </select>
					</div>
					<div class="form-group-center form-control-medium">
						<label for="updateChild">是否更新子栏目：</label>
                        <label class="checkbox-inline">
                            <input type="radio" name="updateChild" id="subscribe-yes" value="1" checked="">是
                        </label>
                        <label class="checkbox-inline">
                            <input type="radio" name="updateChild" id="subscribe-no" value="0">否
                        </label>
					</div>
					<div class="form-btn-group-center" shiro:hasAnyPermissions="system:static:generate">
			          	<button type="button" class="btn btn-info" onclick="generate('2');">开始生成HTML</button>
			        </div>
				</form>
			</div>
		    <section class="panel" style="margin-top:20px;">
				<header class="panel-heading tab-bg-dark-navy-blue">
					<i class="fa fa-clock-o"></i> 执行状态
				</header>
				<div class="panel-body">
					<div class="graph">
						<strong id="bar" style="width:0%;"></strong>
					</div>
					<div class="result"></div>
				</div>
			</section>
		</div>
	</div>
</section>
<script src="/resource/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/resource/js/bootstrap.min.js"></script>
<script src="/resource/js/jquery.serializejson.js"></script>
<script th:inline="javascript">
	var socket;
	var baseUrl = [[${system.website}]];
	var indexBar,indexBarNum = 0;
	//UUID
	var s = [];
	var hexDigits = "0123456789abcdef";
	for (var i = 0; i < 36; i++) {
	    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
	}
	s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
	s[8] = s[13] = s[18] = s[23] = "-";
	var clientId = s.join("");

	window.onload = function(){
		openSocket();
	}
	function generate(type){
		indexBarNum = 0;
		if(type == "1"){
			$.ajax({
				url : "/admin/static/generateIndex/" + clientId,
				contentType : 'application/json',
				data : null,
				type : "POST",
				dataType : "JSON",
				success : function(result) {
					console.log(result);
				}
			});
		}else if(type == "2"){
			var obj = $('#form2').serializeJSON();
			$.ajax({
				url : "/admin/static/generateCategory/" + clientId,
				contentType : 'application/json',
				data : JSON.stringify(obj),
				type : "POST",
				dataType : "JSON",
				success : function(result) {
					console.log(result);
				}
			});
		}
	}
	function openSocket() {
	    if(typeof(WebSocket) == "undefined") {
	        console.log("您的浏览器不支持WebSocket");
	    }else{
	        console.log("您的浏览器支持WebSocket");
	        var socketUrl = baseUrl + "admin/ws/" + clientId;
	        socketUrl=socketUrl.replace("https","ws").replace("http","ws");
	        if(socket!=null){
	            socket.close();
	            socket=null;
	        }
	        socket = new WebSocket(socketUrl);
	        //打开事件
	        socket.onopen = function() {
	            console.log("websocket已打开");
	        };
	        //获得消息事件
	        socket.onmessage = function(msg) {
	        	var message = JSON.parse(msg.data);
	        	console.log(message.progress);
	        	indexBarNum = message.progress;
	        	indexBar = window.setInterval(function(){indexProBar(message.message)},10); 
	        	$(".result").html(message.message);
	        };
	        //关闭事件
	        socket.onclose = function() {
	            console.log("websocket已关闭");
	        };
	        //发生了错误事件
	        socket.onerror = function() {
	            console.log("websocket发生了错误");
	        }
	    }
	}
	function sendMessage() {
	    if(typeof(WebSocket) == "undefined") {
	        console.log("您的浏览器不支持WebSocket");
	    }else {
	        console.log("您的浏览器支持WebSocket");
	        socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
	    }
	}
	function indexProBar(message){ 
		var maxWidth = $(".graph").width();
		var barWidth = $("#bar").width();
		var curentWidth = barWidth / maxWidth;
		var curentBar = Math.ceil(curentWidth * 100);
		var bar = $("#bar");
		$(bar).css("width",(barWidth + 1) + "px"); 
		$(bar).html(curentBar + "%"); 
		if(curentBar >= indexBarNum){ 
			$(bar).css("width", indexBarNum + "%"); 
			window.clearInterval(indexBar); 
		}
	} 
</script>
</body>
</html>
